<template>
  <div class="container">
    <div class="nav-bar flex">
        <div class="active">优惠券</div>
        <router-link tag="div" :to="'/dzj'">
            电子券
        </router-link>
    </div>
    <div class="nav-bar-before"></div>    
    <div class="hr40"></div>
    <div class="hr20"></div>
    <xd-datalist ref="datalist" url="/api/couponList">
      <template slot-scope="scope">
        <div class="list-item flex flex-stretch" :class="'list-item'+(index%3)" v-for="(item,index) in scope.list" :key="index">
      <div class="flex-con">
        <div class="title">
           伊莱克斯家电优惠券
       </div>
       <div class="desc">
           有效期限：<span class="valid-time">2018.04.01-2018.05.11</span> 
       </div>
       <div class="more-info">
         <div class="flex">
           <div>
             详细信息
           </div>
            <img src="../../assets/icons/yh/ok.png" alt="" class="ok-icon">
         </div>           
       </div>
      </div>
      <div class="text-center">
        <div class="discount">
          <span class="discount-num">5</span>折
        </div>
        <div class="discount-txt">
          全国通用
        </div>
      </div>       
    </div>
      </template>
      
    </xd-datalist>
    
  </div>

</template>
<style scoped lang="scss">
@import "../../styles/nav";
html,
body,
.container {
  background-color: #ebebeb;
}
.hr40 {
  height: 0.4667rem;
}
.list-item {
  padding-top: 0.3867rem;
  padding-left: 0.52rem;
  padding-right: 0.3467rem;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: -0.2667rem;
  .desc {
    font-size: 0.2933rem;
    color: #bbbbbb;
    .valid-time {
      color: #007f00;
    }
  }
}
.hr20 {
  height: 0.2667rem;
}

.more-info {
  font-size: 0.2667rem;
  color: #999999;
  padding-top: 0.4133rem;
  .ok-icon {
    width: 0.2533rem;
    height: 0.2667rem;
    margin-left: 0.1333rem;
  }
}
.discount,
.discount-txt {
  font-size: 0.3467rem;
  color: #fff;
}
.discount-txt {
  padding-top: 0.1733rem;
}
.discount-num {
  font-size: 0.96rem;
  color: #fff;
}
.title {
  font-size: 0.4rem;
  color: #222222;
  padding-bottom: 0.1333rem;
}
.list-item {
  //   697 × 285
  width: 9.28rem;
  height: 2.9867rem;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list-item0 {
  background-image: url("../../assets/icons/yh/redline.png");
}
.list-item1 {
  background-image: url("../../assets/icons/yh/originline.png");
}
.list-item2 {
  background-image: url("../../assets/icons/yh/blueline.png");
}
</style>
<script>
export default {
  data() {
    return {
      list: [0, 1, 0, 1, 1, 1, 1]
    };
  }
};
</script>

